<template>
    <div id="counpon">
        <div class="tab-title-contetn">
            <van-tabs>
                <van-tab v-for="(item, index) in orderTabList" :title="item.name" :key="index">
                </van-tab>
            </van-tabs>
        </div>
        <div class="list-contetn">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <div v-for="(item, index) in list" :key="index" class="list-conts" >
                    <div class="left-content">
                        <div>
                            <span class="time">电瓶车充电优惠券</span>
                            <span class="place-title" @click="regular">查看规则详情> </span>
                        </div>
                        <div class="t-middle">
                            <span>有效期至 2019-10-30</span>
                        </div>
                        <div class="btn-cont">
                            <van-button round type="info" size="small">去使用</van-button>
                        </div>
                    </div>
                    <div class="right-content">
                        <div class="money"><span class="money-num">20</span>元</div>
                        <div class="money-detail"></div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
    export default {
        name: "counpon",
        data() {
            return {
                orderTabList: [
                    {name: '全部'},
                    {name: '充电券'},
                    {name: '洗车券'},
                    {name: '充电券'},
                    {name: '测试券'}
                ],
                orderList: [],
                list: [],
                loading: false,
                finished: false
            }
        },
        mounted() {
        },
        methods: {
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 500);
            },
            regular() {
                this.$router.push('/wallet/regular')
            }
        }
    }
</script>

<style scoped lang="scss">
    #counpon {
        .list-contetn {
            padding: 0 16px;
            .list-conts {
                margin-top: 16px;
                height: 90px;
                background: #fff;
                font-size: 12px;
                padding: 15px 0;
                vertical-align: top;
                border-bottom: 4px solid #3b80ed;
                .left-content {
                    display: inline-block;
                    width: 80%;
                    font-size: 14px;
                    .time {
                        padding: 20px;
                        padding-right: 10px;
                    }
                    .place-title {
                        padding: 20px 0;
                        font-size: 12px;
                        color: #b8bdc7;
                    }
                    .t-middle {
                        color: #b8bdc7;
                        span {
                            display: inline-block;
                            text-align: center;
                            padding: 0 20px;
                        }
                    }
                    .btn-cont {
                        padding: 20px 20px;
                        .van-button {
                            width: 80px;
                        }
                    }
                }
                .right-content {
                    display: inline-block;
                    width: 20%;
                    text-align: center;
                    vertical-align: top;
                    .money {
                        font-weight: 500;
                        font-size: 14px;
                        margin-bottom: 20px;
                        .money-num {
                            font-size: 30px;
                        }
                    }
                }
            }
        }
    }
</style>
